<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    input{display: block;margin-bottom: 10px;}
    </style>
</head>
<body>
    id:<input type="text" name="" id="id">
    name:<input type="text" name="" id="name">
    img:<input type="text" name="" id="img">
    num:<input type="text" name="" id="num">
    price:<input type="text" name="" id="price">
    <input type="submit" id="btn">
    <script>
    var btninp=document.getElementById("btn")
    var nameinp=document.getElementById("name")
    var imginp=document.getElementById("img")
    var numinp=document.getElementById("num")
    var idinp=document.getElementById("id")
    var priceinp=document.getElementById("price")
    btninp.onclick=function(){
    if(getcookie("id_"+idinp.value)){
        setcookie("num_"+idinp.value,numinp.value,1)    
    }
    else{
      setcookie("id_"+idinp.value,idinp.value,1)
      setcookie("name_"+idinp.value,nameinp.value,1)
      setcookie("img_"+idinp.value,imginp.value,1)
      setcookie("num_"+idinp.value,numinp.value,1)
      setcookie("price_"+idinp.value,priceinp.value,1)
     }
    }

    function setcookie(name,value,d,path="/"){
        var date=new Date()
        date.setDate(date.getDate()+d)
        document.cookie=name+"="+encodeURIComponent(value)+";expires="+date+";path="+path
    } 
    function getcookie(name){
      if(document.cookie){
        var str=document.cookie
        var arr=str.split(";")
        for(var i=0;i<arr.length;i++){
            var key=arr[i].trim().split("=")[0]
            var value=arr[i].split("=")[1]
            if(key==name){
                return decodeURIComponent(value)
            }
        }   
      }
      return ""
    }
    </script>
</body>
</html>